<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    Date date = new Date();
    String nowDate = sdf.format(date);
%>

<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <title>Hotel | 酒店</title>
    <jsp:include page="../../../includes/header.jsp"/>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">
<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../../../includes/top_navigation_reception.jsp"/>

    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">

        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>

                <h1>
                    酒店预览 | HOTEL
                    <small>最新发布</small>
                    <button type="button" style="float: right" class="layui-btn layui-btn-primary"  lay-on="page">投诉反馈</button>
                </h1>
                <%--                <ol class="breadcrumb">--%>
                <%--                    <br>--%>
                <%--                    <li><a href="/hotel/index"><i class="fa fa-dashboard"></i>酒店预览</a></li>--%>
                <%--                    <li><a href="#">SHOW</a></li>--%>

                <%--                </ol>--%>
            </section>
            <br>
            <section class="content">
                <div class="row">
                    <div class="thumbnail">
                        <div class="caption">
                            <div class="container-fluid">
                                <div class="row">
                                    <br>
                                    <div class="col-md-12 col-lg-12">
                                        <h1>⛪${hotel.title}</h1>
                                        <hr>
                                        <div class="layui-carousel" id="ID-carousel-demo-image"
                                             style="margin-left: 150px">
                                            <div carousel-item>
                                                <c:forEach var="pictureUrl" items="${hotel.pictureList}">
                                                    <div><img style="width: 720px; height: 360px;" src="${pictureUrl}"></div>
                                                </c:forEach>
                                            </div>
                                        </div>
                                        <hr>
                                        <div>
                                            <div class="layui-bg-gray" style="padding: 16px;">
                                                <div class="layui-row layui-col-space15">
                                                    <div class="layui-col-md6">
                                                        <div class="layui-card">
                                                            <div class="layui-card-header">酒店介绍</div>
                                                            <div class="layui-card-body">
                                                                <div id="ID-rate-demo-setText-1"
                                                                     lay-options="{value: 4, theme: 'green'}"></div>
                                                                <h4 style="padding-top: 10px">
                                                                    名称🏘️：${hotel.title}</h4>
                                                                <h4 style="padding-top: 10px">
                                                                    地区🖼️：[${hotel.houseType}&nbsp;<small>| ${hotel.zip}</small>]
                                                                </h4>
                                                                <h4 style="padding-top: 10px">
                                                                    详细地址🏘️：${hotel.zip}</h4>
                                                                <h4 style="padding-top: 10px">
                                                                    联系电话📞: ${hotel.phone}</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <div class="layui-card">
                                                            <div class="layui-card-header">酒店设施</div>
                                                            <div class="layui-card-body">
                                                                <div style="display: flex">
                                                                    <div>
                                                                        <c:if test="${hotel.freeParking}">
                                                                            <h4 style="padding: 10px 10px 10px 40px;">
                                                                                🚗免费停车</h4>
                                                                        </c:if>
                                                                        <c:if test="${hotel.swimmingPool}">
                                                                            <h4 style="padding: 10px 10px 10px 40px;">
                                                                                🏞️游泳池
                                                                            </h4>
                                                                        </c:if>
                                                                        <c:if test="${hotel.businessCenter}">
                                                                            <h4 style="padding: 10px 10px 10px 40px;">
                                                                                🛜提供上网服务的商务中心
                                                                            </h4>
                                                                        </c:if>
                                                                    </div>
                                                                    <div>
                                                                        <c:if test="${hotel.freeParking}">
                                                                            <h4 style="padding: 10px 10px 10px 40px;">
                                                                                🧚‍♀️有健身房的健身中心
                                                                            </h4>
                                                                        </c:if>
                                                                        <c:if test="${hotel.tennisCourt}">
                                                                            <h4 style="padding: 10px 10px 10px 40px;">
                                                                                🎾网球场
                                                                            </h4>
                                                                        </c:if>
                                                                        <c:if test="${hotel.meetingRoom}">
                                                                            <h4 style="padding: 10px 10px 10px 40px;">
                                                                                🔍会议室
                                                                            </h4>
                                                                        </c:if>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-bg-gray" style="padding: 16px;">
                                                <div class="layui-row layui-col-space15">
                                                    <div class="layui-col-md6">
                                                        <div class="layui-card">
                                                            <div class="layui-card-header">详情介绍</div>
                                                            <div class="layui-card-body">
                                                                ${hotel.content}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="layui-col-md6">
                                                        <div class="layui-card">
                                                            <div class="layui-card-header">客房特色</div>
                                                            <div class="layui-card-body">
                                                                <div style="display: flex">
                                                                    <div>
                                                                        <h4 style="padding: 10px 10px 10px 40px;">
                                                                            🧊空调</h4>
                                                                        <h4 style="padding: 10px 10px 10px 40px;">
                                                                            🛁独立卫浴
                                                                        </h4>
                                                                        <h4 style="padding: 10px 10px 10px 40px;">
                                                                            🧥免费一次性洗护用品
                                                                        </h4>
                                                                        <h4 style="padding: 10px 10px 10px 40px;">
                                                                            🍵提供免费饮品
                                                                        </h4>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>

                                <br>
                                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more">分享到：</a>
                                    <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友">QQ好友</a>
                                    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
                                    <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网">豆瓣网</a>
                                    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
                                    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
                                    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>
                                    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
                                </div>
                            </div>
                        </div>

                        <%--留言功能--%>
                        <div style="margin:0 2% 0 2%;">
                            <br/>
                            <!-- 留言的表单 -->
                            <form class="layui-form" action="/article/saveHotelWords" method="post">
                                <input name="lw_name" value="${user.uname}" hidden="hidden"/>
                                <input name="lw_date" value="<%=nowDate%>" hidden="hidden"/>
                                <input name="lw_hotel_id" value="${hotel.hid}" hidden="hidden"/>
                                <div class="layui-input-block" style="margin-left: 0;">
                                    你的评价：
                                    <div id="ID-rate-demo-setText-2" name="score"></div>
                                    <input type="hidden" id="hiddenScore" name="score" value="5"/>
                                    <textarea id="lw_content" name="lw_content" placeholder="请输入你的留言"
                                              class="layui-textarea"
                                              style="height: 150px;"></textarea>
                                </div>
                                <br/>
                                <div class="layui-input-block" style="text-align: left;margin-left: 0;">
                                    <input type="submit" class="btn btn-primary" value="留言">
                                </div>
                            </form>
                            <br/>
                            <div class="layui-tab" lay-filter="test-hash">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="11">点评🖱️</li>
<%--                                    <li lay-id="22">问答</li>--%>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div class="layui-row layui-col-space30">
                                            <div class="layui-col-md5">
                                                <div class="grid-demo">
                                                    <div class="layui-card">
                                                        <div class="layui-card-header" style="height: auto">
                                                            <div id="ID-rate-demo-readonly"
                                                                 lay-options="{value: 4, theme: 'green'}"></div>
                                                        </div>
                                                        <div class="layui-card-body">
                                                            <c:forEach var="statics" items="${wordStatics}">
                                                                ${statics.scoreText}：
                                                                <div class="layui-progress" style="margin-bottom: 30px">
                                                                    <div class="layui-progress-bar"
                                                                         lay-percent="${statics.scoreRatioText}">
                                                                    </div>
                                                                </div>
                                                            </c:forEach>
                                                            <img style="border-radius: 10px; width: 30vh"
                                                                 src="https://img0.baidu.com/it/u=2992623689,540442647&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710781200&t=5e83e7951cb2ef54a159f3404495e165">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md7">
                                                <!-- 留言信息列表展示 -->
                                                <div>
                                                    <ul>
                                                        <!-- 先遍历留言信息（一条留言信息，下面的全是回复信息） -->
                                                        <c:forEach items="${lw_list}" var="words">
                                                            <!-- 如果留言信息是在本文章下的才显示 -->
                                                            <c:if test="${words.lw_hotel_id eq hotel.hid}">
                                                                <li style="border-top: 1px dotted #01AAED">
                                                                    <br/>
                                                                    <div style="text-align: left;color:#444">
                                                                        <div>
                                                                            <span style="color:#01AAED">${words.lw_name==null?"匿名用户":words.lw_name}</span>
                                                                        </div>
                                                                        <div class="class-test-rate"
                                                                             lay-options="{value: ${words.score}}"></div>
                                                                        <div>${words.lw_content}</div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="comment-parent"
                                                                             style="text-align:left;margin-top:7px;color:#444">
                                                                            <span>${words.lw_date}</span>
                                                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                                                            <p>
                                                                                <a href="javascript:;"
                                                                                   style="text-decoration: none;"
                                                                                   onclick="btnReplyClick(this)">回复</a>
                                                                            </p>
                                                                        </div>

                                                                        <!-- 回复表单默认隐藏 -->
                                                                        <div class="replycontainer layui-hide"
                                                                             style="margin-left: 61px;">
                                                                            <form action="/article/saveHotelReply"
                                                                                  method="post"
                                                                                  class="layui-form">
                                                                                <input name="lr_hotel_id"
                                                                                       id="lr_hotel_id"
                                                                                       value="${hotel.hid}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_name" id="lr_name"
                                                                                       value="${user.uname}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_date" id="lr_date"
                                                                                       value="<%=nowDate%>"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_for_name"
                                                                                       id="lr_for_name"
                                                                                       value="${words.lw_name}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_for_words"
                                                                                       id="lr_for_words"
                                                                                       value="${words.lw_id}"
                                                                                       hidden="hidden"/>
                                                                                <input name="lr_for_reply"
                                                                                       id="lr_for_reply"
                                                                                       value="${reply.lr_id}"
                                                                                       hidden="hidden"/>
                                                                                <div class="layui-form-item">
															<textarea name="lr_content" id="lr_content"
                                                                      lay-verify="replyContent"
                                                                      placeholder="请输入回复内容"
                                                                      class="layui-textarea"
                                                                      style="min-height:80px;"></textarea>
                                                                                </div>
                                                                                <div class="layui-form-item">
                                                                                    <button id="replyBtn"
                                                                                            class="layui-btn layui-btn-mini"
                                                                                            lay-submit="formReply"
                                                                                            lay-filter="formReply">提交
                                                                                    </button>
                                                                                </div>
                                                                            </form>
                                                                        </div>
                                                                    </div>

                                                                    <!-- 以下是回复信息 -->
                                                                    <c:forEach items="${lr_list}" var="reply">
                                                                        <!-- 每次遍历出来的留言下存在回复信息才展示（本条回复信息是本条留言下的就显示在当前留言下） -->
                                                                        <c:if test="${reply.lr_hotel_id eq hotel.hid && reply.lr_for_words eq words.lw_id}">
                                                                            <div style="text-align: left;margin-left:61px;color: #444">
                                                                                <div>
                                                                                    <span style="color:#5FB878">${reply.lr_name}&nbsp;&nbsp;</span>
                                                                                </div>
                                                                                <div>
                                                                                    @${reply.lr_for_name}:&nbsp;&nbsp; ${reply.lr_content}</div>
                                                                            </div>
                                                                            <div>
                                                                                <div class="comment-parent"
                                                                                     style="text-align:left;margin-top:7px;margin-left:61px;color:#444">
                                                                                    <span>${reply.lr_date}</span>
                                                                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                    <p>
                                                                                        <a href="javascript:;"
                                                                                           style="text-decoration: none;"
                                                                                           onclick="btnReplyClick(this)">回复</a>
                                                                                    </p>
                                                                                    <hr style="margin-top: 7px;"/>
                                                                                </div>

                                                                                <!-- 回复表单默认隐藏 -->
                                                                                <div class="replycontainer layui-hide"
                                                                                     style="margin-left: 61px;">
                                                                                    <form action="/article/saveHotelReply"
                                                                                          method="post"
                                                                                          class="layui-form">
                                                                                        <input name="lr_hotel_id"
                                                                                               id="lr_hotel_id"
                                                                                               value="${hotel.hid}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_name"
                                                                                               id="lr_name"
                                                                                               value="${user.uname}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_date"
                                                                                               id="lr_date"
                                                                                               value="<%=nowDate%>"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_for_name"
                                                                                               id="lr_for_name"
                                                                                               value="${words.lw_name}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_for_words"
                                                                                               id="lr_for_words"
                                                                                               value="${words.lw_id}"
                                                                                               hidden="hidden"/>
                                                                                        <input name="lr_for_reply"
                                                                                               id="lr_for_reply"
                                                                                               value="${reply.lr_id}"
                                                                                               hidden="hidden"/>
                                                                                        <div class="layui-form-item">
                                                    <textarea name="lr_content" id="lr_content"
                                                              lay-verify="replyContent" placeholder="请输入回复内容"
                                                              class="layui-textarea" style="min-height:80px;">
                                                      @${words.lw_name}:&nbsp;&nbsp;
                                                  </textarea>
                                                                                        </div>
                                                                                        <div class="layui-form-item">
                                                                                            <button id="replyBtn"
                                                                                                    class="layui-btn layui-btn-mini"
                                                                                                    lay-submit="formReply"
                                                                                                    lay-filter="formReply">
                                                                                                提交
                                                                                            </button>
                                                                                        </div>
                                                                                    </form>
                                                                                </div>
                                                                            </div>
                                                                        </c:if>
                                                                    </c:forEach>
                                                                </li>
                                                            </c:if>
                                                        </c:forEach>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">内容-2</div>
                                    <div class="layui-tab-item">内容-3</div>
                                    <div class="layui-tab-item">内容-4</div>
                                    <div class="layui-tab-item">内容-5</div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <%--</section>--%>
                <br>
                <!-- /.container -->
        </div>
        <!-- /.content-wrapper -->

    </div>

    <%--版权--%>
    <jsp:include page="../../../includes/copyright.jsp"/>
    <!-- ./wrapper -->
    <%--js--%>
    <jsp:include page="../../../includes/footer.jsp"/>
    <%--回复--%>
    <script>
        function btnReplyClick(elem) {
            if ($(this)) {
            } else if (!$(this)) {
                $(elem).parent('p').parent('.comment-parent').siblings('.replycontainer').toggleClass('layui-show');
            }
            $(elem).parent('p').parent('.comment-parent').siblings('.replycontainer').toggleClass('layui-hide');
            if ($(elem).text() == '回复') {
                $(elem).text('收起')
            } else {
                $(elem).text('回复')
            }
        }

        $("#replyBtn").click(function () {
            var lr_hotel_id = $("#lr_hotel_id").val();
            var lr_name = $("#lr_name").val();
            var lr_date = $("#lr_date").val();
            var lr_for_name = $("#lr_for_name").val();
            var lr_content = $("#lr_content").val();
            var lr_for_words = $("#lr_for_words").val();
            $.ajax({
                url: '/article/saveHotelReply',
                type: 'POST',
                data: [{
                    lr_hotel_id: lr_hotel_id,
                    lr_name: lr_name,
                    lr_date: lr_date,
                    lr_for_name: lr_for_name,
                    lr_content: lr_content,
                    lr_for_words: lr_for_words
                }],
                success: function (data) {
                    layer.open({
                        title: '提示信息',
                        content: '留言成功',
                        btn: ['确定'],
                        btn1: function (index) {
                            $("body").html(data);
                        }
                    });
                },
                error: function () {
                    layer.open({
                        title: '提示信息',
                        content: '出现未知错误'
                    });
                }
            });
        });


    </script>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>

    <script>
        layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            // 批量事件
            util.on('lay-on', {
                page: function(){
                    // 页面层
                    layer.open({
                        type: 1,
                        title: '投诉反馈',
                        area: ['420px', '240px'], // 宽高
                        content: '<div style="padding: 11px;">' +
                            '<form id="formId" class="form-horizontal" action="/feedback/saveHotel" method="post">' +
                            '<div class="box-body">' +
                            '<div class="form-group"><label for="title" class="col-sm-2 control-label">标题</label><div class="col-sm-10"><input type="text" name="title" class="form-control" id="title" ></div></div>' +
                            '<div class="form-group"><label for="score" class="col-sm-2 control-label">评分</label><div id="ID-rate-demo-setText-3" name="score1"></div><input type="hidden" id="hiddenScore1" name="score" value="5"/></div>' +
                            '<div class="form-group"><label for="content" class="col-sm-2 control-label">内容</label><div class="col-sm-10"><textarea name="content" id="content" placeholder="请输入投诉内容" class="layui-textarea"></textarea></div></div>' +
                            '</div><input type="hidden" id="hotelIdStr" name="hotelIdStr" value="${hotel.hid}"/><input type="hidden" readonly name="userId" value="${user.uid}" class="form-control" id="userId" placeholder="${user.uid}"><button id="btnSunmit" type="submit" class="btn btn-info pull-right" onclick="">提交 </button></form>' +
                            '</div>',
                            '</div>',
                        success: function(layero, index) {
                            var rate = layui.rate;
                            // 渲染

                            rate.render({
                                elem: '#ID-rate-demo-setText-3',
                                value: 5,
                                text: true,
                                setText: function (value) { // 自定义文本的初始回调
                                    const arrs = {
                                        '1': '非常不满意',
                                        '2': '不满意',
                                        '3': '一般',
                                        '4': '满意',
                                        '5': '非常满意',
                                    };
                                    this.span.text(arrs[value] || (value + "星"));
                                },
                                choose: function (value) {
                                    $('#hiddenScore1').val(value); // 获得选中的评分值
                                }
                            });
                        }
                    });
                },
            })
            var element = layui.element;

            // hash 地址定位
            var hashName = 'tabid'; // hash 名称
            var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值

            // 初始切换
            element.tabChange('test-hash', layid);
            // 切换事件
            element.on('tab(test-hash)', function (obj) {
                location.hash = hashName + '=' + this.getAttribute('lay-id');
            });
            var carousel = layui.carousel;

            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
            var rate = layui.rate;
            // 渲染
            rate.render({
                elem: '#ID-rate-demo-readonly',
                value: 4,
                readonly: true
            });
            // 渲染
            rate.render({ // eg1
                elem: '#ID-rate-demo-setText-2',
                value: 5,
                text: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                },
                choose: function (value) {
                    $('#hiddenScore').val(value); // 获得选中的评分值
                }
            });
            // 渲染
            rate.render({ // eg1
                elem: '#ID-rate-demo-setText-1',
                text: true,
                readonly: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                }
            });
            // 批量渲染
            rate.render({
                elem: '.class-test-rate',
                readonly: true,
                text: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                }
            });
        });


    </script>
    <script>window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {"bdSize": 16},
        "image": {
            "viewList": ["sqq", "weixin", "douban", "tsina", "tqq", "renren", "qzone"],
            "viewText": "分享到：",
            "viewSize": "16"
        },
        "selectShare": {
            "bdContainerClass": null,
            "bdSelectMiniList": ["sqq", "weixin", "douban", "tsina", "tqq", "renren", "qzone"]
        }
    };
    with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];


    </script>

</body>
</html>